<template>
  <div>
    <el-table height="600px" class="_table" :data="list" v-loading="loading">
      <el-table-column label="商品图片">
        <template #default="scope">
          <img style="width: 72px; height: 72px" :src="scope.row.floorInfoImg?.split(',')[0]" />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名称">
        <template #default="scope">
          {{ scope.row.floorInfoVal.goodsName }}
        </template>
      </el-table-column>
      <el-table-column prop="supplierName" label="所属供应商">
        <template #default="scope">
          {{ scope.row.floorInfoVal.supplierName }}
        </template>
      </el-table-column>
      <el-table-column prop="goodsStatus " label="商品状态">
        <template #default="scope">
          {{ consts.GoodsStatus[scope.row.floorInfoVal.goodsStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格(元)">
        <template #default="scope">
          {{ scope.row.floorInfoVal.price }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <Link label="删除" @click="onDelGoodClick(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import consts from '@/consts'
import Link from '@/components/button/link.vue'

const props = defineProps(['list', 'loading'])
const emit = defineEmits(['remove'])
const onDelGoodClick = (index) => {
  emit('remove', index)
}
</script>
